<template>
  <!-- 全局引入TinyMCE -->

  <el-dialog
    v-model="editDialogVisible"
    title="修改客户信息"
    width="60%"
    center
    @close="closeDialog(false)"
  >
    <el-form
      ref="validateForm"
      :model="orderForm"
      :rules="rules"
      label-width="120px"
    >
      <el-row>
        <el-col :span="12"> 
       <el-form-item label="客户" prop="customerId" style="margin-bottom:0px;">
       {{customerName}} <el-button style="padding: 3px;margin-left:5px;" type="primary" size="mini"
                       @click="showPopCus()">选择 </el-button>
      </el-form-item>
      </el-col>
      <el-col :span="12"> 
      <el-form-item label="手机/电话" style="margin-bottom:0px;" >
        {{customerPhone}} 
      </el-form-item>
      </el-col>
      </el-row>
       <el-row>
        <el-col :span="24"> 
      <el-form-item label="地址" style="margin-bottom:0px;">
        {{customerAddress}} 
      </el-form-item>
         </el-col>
      </el-row>
       <el-row>
        <el-col :span="12"> 
      <el-form-item label="订单类型" prop="orderStatus">
        <el-select v-model="orderForm.orderStatus"  >
          <el-option
            v-for="item in orderTypeList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
        </el-col>
        <el-col :span="12"> 
      <el-form-item label="订单状态" prop="orderStatus">
        <el-select v-model="orderForm.orderStatus"  disabled >
          <el-option
            v-for="item in orderStatusList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
        </el-col>
      </el-row>
        <el-row>
        <el-col :span="12"> 
           <el-form-item label="业务员" prop="businessId">
          <el-select v-model="orderForm.businessId" placeholder="请选择">
            <el-option
              v-for="item in businessList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
      </el-form-item>

       </el-col>
        <el-col :span="12"> 
      <el-form-item label="定金" prop="deposit">
        <el-input v-model="orderForm.deposit" style="width:150px;"></el-input>
      </el-form-item>
 </el-col>
      </el-row>
      <el-row>
        <el-col :span="12"> 
       <el-form-item label="审核人" prop="reviewerId">
          <el-select v-model="orderForm.reviewerId" placeholder="请选择">
            <el-option
              v-for="item in reviewerList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
      </el-form-item>
        </el-col>
        <el-col :span="12"> 
       <el-form-item label="价税合计" prop="deposit">
        <el-input v-model="orderForm.sumPrice" style="width:150px;" disabled></el-input>
      </el-form-item>
 </el-col>
      </el-row>
    <el-row>
        <el-col :span="12"> 
      <el-form-item label="下单日期" prop="orderDate">
        <el-date-picker v-model="orderForm.orderDate" value-format="YYYY-MM-DD" 
          format="YYYY-MM-DD" type="date" placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
        </el-col>
        <el-col :span="12"> 
      
      <el-form-item label="定金收款人" prop="depositer">
        <el-select v-model="orderForm.depositer"  filterable placeholder="请选择">
          <el-option
            v-for="item in depositerList"
            :key="item.id"
            :label="item.name"
            :value="item.name"
          >
          </el-option>
        </el-select>
      </el-form-item>
      </el-col>
      </el-row>
<el-row>
        <el-col :span="24"> 
      <el-form-item label="备注信息" prop="remark">
        <el-input v-model="orderForm.remark"></el-input
      ></el-form-item>
 </el-col>
      </el-row>

   
      <el-form-item>
        <el-button @click="validateLogin" type="primary">修改</el-button>
        <el-button
          @click="
            () => {
              closeDialog(false);
            }
          "
          >取消</el-button
        >
      </el-form-item>
    </el-form>
       <CustomePop :cusPopDialogVisible="cusPopDialogVisible"  v-if="cusPopDialogVisible===true"
    @onCusPopCloseDialog="closeCusPopDialog"></CustomePop>
  </el-dialog>
</template>

<script>
import { reactive, ref, toRefs, onMounted ,computed } from "vue";
import { ElNotification } from "element-plus";
import { getRequest, putRequest } from "../../utils/api";
import CustomePop from "../cus/CustomePop.vue";

function useLoadFormData(state) {
  getRequest("/order/basic/one", { id: state.orderId }).then((res) => {
    if (res && res.code == 200) {
      state.orderForm = res.data;
      state.customerInfo = res.data.customerInfo ;
    } else {
      ElNotification({
        type: "error",
        title: "失败",
        message: "查询失败",
        duration: 2000,
      });
    }

    // state.imageUrl = res.data.coverImg;
    //  editor.value.setHTML(res.data.orderDetail);
  });
}

export default {
   components: {CustomePop},
  props: {
    editDialogVisible: Boolean,
    orderId: String,
  },
  setup(props, { emit }) {
    const validateForm = ref();
     const rules = {
      name: [{ required: true, message: "请输入订单姓名", trigger: "blur" }],
      orderDate: [{ required: true, message: "请选择下单日期", trigger: "blur" }],
      customerId:[{ required: true, message: "请选择客户", trigger: "blur" }],
      reviewerId:[{ required: true, message: "请选择订单审核人", trigger: "blur" }],
      businessId:[{ required: true, message: "请选择业务员", trigger: "blur" }]
    };
    const state = reactive({
       cusPopDialogVisible:false,
      editDialogVisible: props.editDialogVisible,
      loading:false ,
      orderId:props.orderId,
       cusotmerList:[],
       customerInfo:null,
       depositerList:[],
       reviewerList:[],
       businessList:[],
       customerName:computed(()=>{if(state.customerInfo){return state.customerInfo.name}else{return ''}}),
       customerPhone:computed(()=>{if(state.customerInfo){return state.customerInfo.phone}else{return ''}}),
       customerAddress:computed(()=>{if(state.customerInfo){return state.customerInfo.address}else{return ''}}),
      orderStatusList: [
        {value: 0,label: "待提交"},
        {value: 1,label: "待审核"},
        {value: 2,label: "审核通过"},
        {value: 3,label: "审核不通过"},
        {value: 4,label: "制单"},
        {value: 5,label: "已发货"},
        {value: 6,label: "安装调试完毕"},
        {value:7,label: "已付尾款"}
        
      ],
       
      orderTypeList:[ {value: 0,label: "直销"},
        {value: 1,label: "维修"},
        {value: 2,label: "调换"},
         {value: 3,label: "补发"}],
      orderForm: {
        customerId:computed(()=>{if(state.customerInfo){return state.customerInfo.id}else{return null;}}),
        orderStatus:0,
        orderDate:'',
        deposit:0.0,
        businessId:null,
        reviewerId:null,
        remark:'',
        depositer:''

      }
    });

    const closeDialog = (visible, data) => {
      emit("onEditCloseDialog", visible, data);
    }
    const validateLogin = () => {
      validateForm.value.validate((valid) => {
        
        putRequest("/order/basic/", state.orderForm).then((res) => {
          if (res && res.code == 200) {
            validateForm.value.resetFields();
            emit("onEditCloseDialog", false, res.data);
          } else {
            ElNotification({
              type: "error",
              title: "失败",
              message: res.message,
              duration: 2000,
            });
          }
        });
      });
    }
     const closeCusPopDialog =(visible, data)=>{
        state.cusPopDialogVisible =visible ;
        state.customerInfo = data;
    }

 

    const showPopCus = ()=>{
      state.cusPopDialogVisible =true ;
    }

    const initEmployee = ()=>{
      //加载收款人 收款人为某个员工
        getRequest('/employee/basic/listAll').then(response => {
              if (response) {
                state.depositerList = response;
              }
            })
    }

     const initAdmin = ()=>{
      //加载所有审核人员
        getRequest('/order/basic/reviewer').then(response => {
              if (response) {
                state.reviewerList = response;
              }
            })
    }

     const initBusiness = ()=>{
      //加载所有业务员
        getRequest('/order/basic/shiftAll').then(response => {
              if (response) {
                state.businessList = response;
                const userId = JSON.parse(window.sessionStorage.getItem("user")).id ;
                response.forEach(element => {
                  if(element.id === userId){
                      state.businessId = userId ;
                  }
                });
              }
            })
     }

    onMounted(() => {
      useLoadFormData(state);
      initEmployee() ;
      initAdmin();
      initBusiness();
    });
    return {
      ...toRefs(state),
      closeCusPopDialog,showPopCus,
      rules,
      // handleAvatarSuccess,
      //解构orderAdd返回的结果  返回submitAdd对象函数 需要把富文本编辑器也传过去 这里省略了
      validateForm,
      closeDialog,
      validateLogin,
    };
  },
}
</script>

<style>
.el-form-item__error {
  padding-top: 0px;
}
.el-input__inner {
  height: 32px;
  line-height: 32px;
}
.el-form-item {
  margin-bottom: 10px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 18px;
  color: #8c939d;
  width: 88px;
  height: 88px;
  line-height: 88px;
  text-align: center;
}
.avatar {
  width: 88px;
  height: 88px;
  display: block;
}
</style>